import React, { Component } from 'react';
import { Menu } from 'element-react';
import { Link } from 'react-router-dom';

class Nav extends Component {
  constructor (props) {
    super(props)
  }
  
  render() {
    return (
      <div className="Nav">
        <Menu defaultActive="2" className="el-menu-vertical-demo" theme="dark">
        {
          this.props.data.map((a, index) => {
            if (a.children.length === 0) {
              return (
                <Link to={a.link} key={index}>
                  <Menu.Item
                    index={String(index)}
                    ><span><i className={a.iconClass}></i>{a.name}</span>
                  </Menu.Item>
                </Link>
              )
            } else {
              return (
                <Menu.SubMenu
                  index={String(index)}
                  key={index}
                  title={<span><i className={a.iconClass}></i>{a.name}</span>}>
                  {a.children.map((item, index1) => {
                    return <Link to={item.link} key={index1}><Menu.Item index={String(index) + '-' + String(index1)} key={index1}>{item.name}</Menu.Item></Link>
                  })}
                </Menu.SubMenu>
              )
            }
          })
        }
        </Menu>
      </div>
    );
  }
}

export default Nav
